<template>
    <div class="container">
        <div class="title">
            <div class="category" @click="toPlace">
                <span>{{ title }}</span>
            </div>
            <span class="total">
                {{ stat.places }}
                <span class="badge">家{{ title }}</span>
            </span>
            <span class="total">
                {{ stat.total }}
                <span class="badge">家商户</span>
            </span>
        </div>
        <div class="content">
            <div class="head">净化设备状况</div>
            <div class="stat">
                <div class="left">
                    <div class="item">
                        <span>规范</span>
                        <span class="data">
                            {{ stat.qual }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                    <div class="item">
                        <span>整改中</span>
                        <span class="data">
                            {{ stat.improve }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                    <div class="item">
                        <span>待整改</span>
                        <span class="data">
                            {{ stat.audit }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                </div>
                <div class="right">
                    <div class="item">
                        <span class="data">{{ ratioQual }}%</span>
                    </div>
                    <div class="item">
                        <span class="data">{{ ratioImprove }}%</span>
                    </div>
                    <div class="item">
                        <span class="data">{{ ratioAudit }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="head">设备清洗状况</div>
            <div class="stat">
                <div class="left">
                    <div class="item">
                        <span>全部规范</span>
                        <span class="data">
                            {{ devopsStat.qual }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                    <div class="item">
                        <span>部分规范</span>
                        <span class="data">
                            {{ devopsStat.part }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                    <div class="item">
                        <span>待规范</span>
                        <span class="data">
                            {{ devopsStat.nodevops }}
                            <span class="badge">家{{ title }}</span>
                        </span>
                    </div>
                </div>
                <div class="right">
                    <div class="item">
                        <span class="data">{{ ratioDevopsQual }}%</span>
                    </div>
                    <div class="item">
                        <span class="data">{{ ratioDevopsPart }}%</span>
                    </div>
                    <div class="item">
                        <span class="data">{{ ratioNoDevops }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, computed, unref, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

const props = defineProps({
    category: {
        type: Number,
        require: true,
    },
    title: {
        type: String,
        require: true,
    },
})

onMounted(async () => {
    await getData()
    nextTick(() => {
        emits('finish')
    })
})

const emits = defineEmits(['finish'])

const toPlace = () => {
    var area = util.GetQueryParam('area')
    location.href = `${process.env.NODE_ENV === 'development' ? '/' : '/datav/'}place.html?cid=${
        props.category
    }&area=${area ? area : ''}`
}

//获取统计数据
const getData = async () => {
    var area = util.GetQueryParam('area')
    var res = await http.get(`getplacestat/${props.category}?area=${area ? area : ''}`)
    if (res.status === 0) {
        let data = res.data

        stat.value.total = data.Total
        stat.value.places = data.Places
        stat.value.improve = data.Improve
        stat.value.audit = data.Rectify
        stat.value.qual = data.Improved

        devopsStat.value.qual = data.Devopsed
        devopsStat.value.part = data.PartDevopsed
        devopsStat.value.nodevops = data.NoDevops
    } else {
        console.log(res)
        ElMessage(res.msg)
    }
}

const stat = ref({
    title: '',
    total: 0,
    places: 0,
    qual: 0,
    improve: 0,
    audit: 0,
})

const ratioQual = computed(() => {
    let ustat = unref(stat)
    return ustat.places == 0 ? 0 : ((ustat.qual / ustat.places) * 100).toFixed(2)
})

const ratioImprove = computed(() => {
    let ustat = unref(stat)
    return ustat.places == 0 ? 0 : ((ustat.improve / ustat.places) * 100).toFixed(2)
})

const ratioAudit = computed(() =>
    stat.value.places == 0 ? 0 : (100 - ratioQual.value - ratioImprove.value).toFixed(2)
)

const devopsStat = ref({
    qual: 0,
    part: 0,
    nodevops: 0,
})

const ratioDevopsQual = computed(() => {
    let ustat = unref(stat)
    let udstat = unref(devopsStat)
    return ustat.places == 0 ? 0 : ((udstat.qual / ustat.places) * 100).toFixed(2)
})

const ratioDevopsPart = computed(() => {
    let ustat = unref(stat)
    let udstat = unref(devopsStat)
    return ustat.places == 0 ? 0 : ((udstat.part / ustat.places) * 100).toFixed(2)
})

const ratioNoDevops = computed(() =>
    stat.value.places == 0 ? 0 : (100 - ratioDevopsQual.value - ratioDevopsPart.value).toFixed(2)
)
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .title {
        width: 100%;
        height: 40px;
        font-size: 16px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .category {
            text-align: center;
            cursor: pointer;

            span {
                background: linear-gradient(
                    to bottom,
                    rgba(9, 109, 217, 0.7),
                    rgba(45, 130, 221, 0.5)
                );
                border: #096dd9;
                border-radius: 5px;
                padding: 5px;
            }
        }

        .total {
            color: #096dd9;
            font-weight: bold;
            font-size: 35px;

            .badge {
                font-size: 10px;
                font-weight: normal;
                color: #fff;
            }
        }
    }
    .content {
        .head {
            font-size: 14px;
            font-weight: bolder;
            padding: 8px 0 0 0;
            color: #096dd9;
        }

        .stat {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 12px;

            .left {
                width: 65%;
                font-size: 12px;
                color: #fff;
                padding: 5px;

                .item {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 2px 0;

                    .data {
                        font-weight: 800;
                        color: #096dd9;

                        .badge {
                            font-size: 10px;
                            font-weight: normal;
                            color: #fff;
                        }
                    }
                }
            }

            .right {
                width: 35%;
                height: 100%;
                font-size: 12px;

                .item {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    padding: 2px 0;

                    span.head {
                        font-size: 14px;
                        font-weight: bolder;
                        padding: 0 0 4px 0;
                        color: #fff;
                    }
                    span.data {
                        font-weight: 800;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>
